<template>
  <transition name="fade">
    <!--loading模板 -->
    <div v-show="visible" class="custom-loading-mask">
      <!--loading中间图标 -->
      <div class="custom-loading-spinner">
        <!-- <i class="custom-spinner-icon"></i> -->
        <Icon type="ios-loading" size="18" class="spinner-icon"></Icon>
        <p class="custom-loading-text">{{ text }}</p>
      </div>
    </div>
  </transition>
</template>
<script>
export default {
  name: "loading",
  // props: {
  //   // 是否显示loading
  //   visible: {
  //     type: Boolean,
  //     default: false
  //   },
  //   // loading上面的显示文字
  //   text: {
  //     type: String,
  //     default: ""
  //   }
  // },
  data() {
    return {
      visible: false,
      text: ""
    };
  },
  methods: {}
};
</script>
<style lang="stylus" scoped>
.custom-loading-mask {
  width: 100%
  height: 100%
  position: fixed
  top: 0
  left: 0
  right: 0
  bottom: 0
  z-index: 3
  opacity: 1
  background: rgba(217, 217, 217, 0.5)
}
.custom-loading-spinner {
  position: absolute
  top: 50%
  left: 56%
  transform: translateY(-50%)
  color: #2d8cf0
  text-align: center
}
.spinner-icon {
  animation: ani-demo-spin 1s linear infinite
}
.custom-loading-text {
  margin-top: 3px
}
</style>
